/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* scss */
import '@src/component/business/BizCustomerTagSelect/BizCustomerTagSelect.scss'
/* util */
import * as _ from 'lodash'
import Platform from '@src/util/platform'
import { stringArrayIntersection } from '@src/util/array'
/* vue */
import { Component, Emit, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'
import VC from '@model/VC'

interface BizListCheckboxSelectItem {
  label: string
  value: string
}

enum BizCustomerTagSelectEmitEventName {
  Change = 'change'
}

@Component({ 
  name: ComponentNameEnum.BizListCheckboxSelect
})
export default class BizListCheckboxSelect extends VC {
  
  @Prop({ default: false }) isSignle: boolean | undefined
  @Prop() readonly fetchFunction: Function | undefined
  @Prop({ default: () => [] }) readonly list: BizListCheckboxSelectItem[] | undefined
  @Prop({ default: '' }) readonly title: string | undefined
  
  private backValue: string[] = []
  private lastValue: string[] = []
  private value: string[] = []
  
  get _isSignle(): boolean {
    return Boolean(this.isSignle)
  }
  
  get selectList(): BizListCheckboxSelectItem[] {
    return this.list || []
  }
  
  /** 
   * @description 修改计划时间完成回调
  */
  @Emit(BizCustomerTagSelectEmitEventName.Change)
  private emitChangeValueHandler() {
    this.lastValue = _.cloneDeep(this.value)
    return this.value
  }
  
  private changedCheckboxHandler(value: string[]): void {
    let checkboxValue: string[] = value
    
    if (this._isSignle && value.length > 1) {
      let intersectionValue: string[] = stringArrayIntersection(value, this.value)
      checkboxValue = value.filter(item => !intersectionValue.includes(item))
      this.value = []
    }
    
    this.value = checkboxValue
  }
  
  /**
   * @description 获取复选框选择列表
   * @return {void}
   */
  private fetchCheckboxSelectList(): void {
    if (!this.fetchFunction) return
  }
  
  /**
   * @description: 下拉框出现/隐藏时触发
   * @param {visible} 出现则为 true，隐藏则为 false
   * @return {void}
  */  
  private visibleHandler(visible: boolean): void {
    // 下拉框显示时不做任何处理
    if (visible) return
    // 下拉框关闭时，如果此次的值和上一次的选中的值一样，则不做任何处理
    if (_.isEqual(this.lastValue, this.value)) return
    
    this.emitChangeValueHandler()
  }
  
  mounted() {
    this.fetchCheckboxSelectList()
  }
  
  render(h: CreateElement) {
    return (
      <div class={ComponentNameEnum.BizCustomerTagSelect}>
        <el-dropdown trigger="click" onVisible-change={(visible: boolean) => this.visibleHandler(visible)}>
          <span class="el-dropdown-link cur-point">
            {this.title}
            <i class="iconfont icon-fdn-select"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-checkbox-group
              class="customer-tag-select-checkbox-group"
              value={this.value} 
              onInput={(value: string[]) => this.changedCheckboxHandler(value)}
            >
            {
              this.selectList.map(item => {
                return (
                  <el-checkbox
                    key={item.value}
                    label={item.value}
                  >
                    { item.label }
                  </el-checkbox>
                )
              })
            }
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    )
  }
}

